
<template>
  <div>
    <transition name="LtoR">
      <div class="loginBox absolute fixedCenter" style="height:610px;"  v-show="whoShow==4">
        <Icon type="ios-arrow-back" class="absolute f_26 cCCC textLink" @click="sendFa(1)" style="top:10px;left:0;" v-show="!$app.judgeData(invite_code) && !$app.judgeData(zhuce)"/>
        <Logo title="用户注册"/>

        <Input type="number"  placeholder="请输入手机号" @on-change="ttxT" 
        onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
        v-model="mobile"  ref="mobile" class="marginB20 " clearable size="large"	>
          <!-- <Icon type="ios-call" slot="prefix" /> -->
        </Input>
        <Row class=" marginB20 " :gutter="20">
          <Col span="16">
            <Input type="text"  placeholder="图形验证码" v-model="captcha" ref="captcha"  clearable size="large">
              <!-- <Icon type="ios-options" slot="prefix" /> -->
            </Input>
          </Col>
          <Col span="8">
            <img :src="tchaObj.img" class="width100 pointer" height="36" @click="$parent.tchaFun">
          </Col>
        </Row>
        <Row class=" marginB20 " :gutter="20">
          <Col span="16">
            <Input type="number"  placeholder="短信验证码" v-model="code" ref="code"  clearable size="large"
            onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
            >
              <!-- <Icon type="ios-chatboxes" slot="prefix" /> -->
            </Input>
          </Col>
          <Col span="8">
          <!-- button 倒计时函数，要用jq处理，原因细说 -->
            <Button type="primary" size="large" long @click="goCodeFun"  :disabled="btnDisabled" id="cDom"
          >获取验证码</Button>
          </Col>
        </Row>
        <Input type="password" v-model="password" placeholder="请输入 不低于6位数密码" ref="password" class="marginB20" size="large" clearable>
          <!-- <Icon type="md-lock" slot="prefix" /> -->
        </Input>
        <Input type="password" v-model="passwordAG" placeholder="再次确认密码" ref="passwordAG" class="marginB20" size="large" clearable>
          <!-- <Icon type="md-lock" slot="prefix" /> -->
        </Input>
        <Input type="text" v-model="invite_code" placeholder="请输入注册邀请码（选填）" ref="invite_code" class="marginB20" size="large" clearable>
          <!-- <Icon type="md-share" slot="prefix" /> -->
        </Input>
        <Checkbox v-model="checkLook" class="f_14 c999 marginB20 ">我已阅读并接受</Checkbox><span class="cBlue textLine" @click="book">《服务猫用户协议》</span>
        <Button type="primary"  class="btnGo" size="large" long @click="goFun">立即注册</Button>
      </div>
    </transition>

    <Modal
      v-model="bookShow"
      title="服务猫用户协议"
      :footer-hide="true"
      :fullscreen="true"
      :mask-closable="false"
    >
        <Book />
    </Modal>
  </div>
</template>



<script>
import Book from './_book';//用户协议
import Logo from './_logo';//logo
export default {
  components: {
    Book,Logo
  },
  data () {
    let {
      $route:{
        query:{
          zhuce,
          invite_code
        }
      }
    }=this;

    let data={
      mobile:'',
      password:'',
      passwordAG:'',
      invite_code:($app.judgeData(invite_code)?invite_code:''),//邀请码
      zhuce:($app.judgeData(zhuce)?zhuce:''),//强制性进来注册页


      captcha:'',//图形 验证码
      code:'',//手机 验证码

      // 获取验证码按钮
      btnDisabled:false,
      

      phoneOk:false,//手机：false不能注册 ，true可以注册

      bookShow:false,//用户协议
      checkLook:false//阅读用户协议
    };
    return data;
  },
  //父=》子，接收父亲的值； 1账号密码/2手机短信/3忘记密码/4新用户注册
  props:['whoShow','tchaObj'],
  created(){
    let {invite_code,zhuce}=this;
    if($app.judgeData(invite_code) || $app.judgeData(zhuce)){
      this.sendFa(4);
    }
  },
  mounted(){

    
  },
  methods: {
    sendFa(num){
      //自定义方法往父传值
      this.$emit('getChildData',num);
    },
    goCodeFun(){
      let that=this;
      $app.loginGetCodeFun(that,1,'cDom');//1注册,2登录,3修改密码,4合伙人认证,5绑定邮箱
    },
    //用户协议
    book(){
      this.bookShow=true;
    },
    //失去焦点判断
    ttxT(){
      let that=this;
      $app.ttxT(1,that);//type：1注册用；2登录+修改密码用
    },
    //提交
    goFun () {
      let that=this;
      let {
        mobile,password,passwordAG,code,checkLook,phoneOk,invite_code,
        $route:{
          query:{
            globalUrl
          }
        }
      }=that;
      
      if(!$app.telCheck(mobile)){
        that.$Message.error({content:'请输入正确的手机格式，勿含空格等特殊字符'});
        that.$refs['mobile'].focus();
      }else if(!phoneOk){
        that.$Message.error({ content: '该手机号已注册' });
        that.$refs['mobile'].focus();
      }else if(!$app.judgeData(code)){
        that.$Message.error({content:'验证码不能为空'});
        that.$refs['code'].focus();
      }else if(!$app.judgeData(password)){
        that.$Message.error({content:'密码不能为空'});
        that.$refs['password'].focus();
      }else if(password.length<6){
        that.$Message.error({content:'密码不能小于6位数'});
        that.$refs['password'].focus();
      }else if(passwordAG!=password){
        that.$Message.error({content:'请再次确认密码'});
        that.$refs['passwordAG'].focus();
      }else if(!checkLook){
        that.$Message.error({content:'请阅读并接受《服务猫用户协议》'});
      }else{
        $ajax.phoneRegister(mobile,password,code,invite_code,that,resData=>{
			    $app.saveToken(globalUrl,resData,false,true);//存token
        });
      }
    }
  }
}
</script>

<style>

</style>
